<template>
    <div className="screen-wrapper">
        <div className="screen" id="screen">
            <div class="screen-root">
                <dashboardChart />
            </div>
        </div>
    </div>
</template>
<script>
import dashboardChart from '../ccomponents/Screen.vue';
export default {
    mounted() {
        this.handleScreenAuto();
        window.onresize = () => this.handleScreenAuto();
    },
    deleted() {
        window.onresize = null;
    },
    components: {
        dashboardChart
    },
    methods: {
        // 数据大屏自适应函数
        handleScreenAuto() {
            const designDraftWidth = 1920; //设计稿的宽度
            const designDraftHeight = 960; //设计稿的高度
            // 根据屏幕的变化适配的比例
            const scale =
                document.documentElement.clientWidth / document.documentElement.clientHeight <
                designDraftWidth / designDraftHeight
                    ? document.documentElement.clientWidth / designDraftWidth
                    : document.documentElement.clientHeight / designDraftHeight;
            // 缩放比例
            document.querySelector('#screen').style.transform = `scale(${scale}) translate(-50%, -50%)`;
        }
    }
};
</script>
<style lang="less">
/*
    除了设计稿的宽高是根据您自己的设计稿决定以外，
*/
.screen-root {
    height: 100%;
    width: 100%;
    .screen {
        display: inline-block;
        // 设计稿的宽度
        width: 1920px;
        // 设计稿的高度
        height: 960px;
        transform-origin: 0 0;
        position: absolute;
        left: 50%;
        top: 50%;
    }
}
</style>
